<template>
  <HeaderPart>编辑送货页面</HeaderPart>
  <div class="wrapper">
    <el-form :model="address" label-width="120px" >
      <el-form-item label="联系人:">
        <el-input v-model="address.contactName" placeholder="联系人姓名"/>
      </el-form-item>
      <el-form-item label="性别:">
        <el-radio-group v-model="address.contactSex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话:">
        <el-input v-model="address.contactTel" placeholder="输入电话"/>
      </el-form-item>
      <el-form-item label="收货地址:">
        <el-input v-model="address.address" placeholder="输入收货地址"/>
      </el-form-item>
      <el-button type="success" @click="update">更新</el-button>
    </el-form>
  </div>
</template>

<script setup>
import HeaderPart from "@/components/common/HeaderPart";
import { ref} from "vue";
import {useRoute} from "vue-router";
import {onBeforeMount} from "vue";
import {getAddressById, updateAddress} from "@/utils/api/addressManager";

// 获得传来的addressId
const id = parseInt(useRoute().params.id)
// 获得地址信息
const address = ref({})
onBeforeMount(async ()=>{
  const res =await getAddressById({id})
  address.value = res.data
})
// 更新页面
const update =async ()=>{
  const res = await updateAddress(address.value)
  console.log(res.data)
}

</script>

<style scoped>
.wrapper {
  margin: 5rem 2rem;
  height: 80vh;
  /*background-color: #70BC46;*/
}
:deep(.el-form-item__label) {
  width: 75px !important;
}
:deep(.el-button){
  width: 100%;
}
</style>